<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script>
        function insert(num) {
            document.f1.textA.value= document.f1.textA.value+num;
            var a=document.f1.textA.value;
            /*     if ( a==undefined) {
                     a="";
                     alert("嘛意思弟弟")
                 }*/
            if (a.length>13){
                alert("嘛意思弟弟")
            }
        }
        function over() {
            var over=document.f1.textA.value;
            if (over){
                document.f1.textA.value=eval(over);//通过获取texta里面的值使用eval方法赋值求值
            }else {
                alert("嘛意思弟弟")
            }

        }
        function clea() {
            document.f1.textA.value="";//将texta里的值清空
        }
        /* function bac() {
        退格无法实现
            /!* var back=document.f1.textA.value;
             document.f1.textA.value.length=back.substring(0,back.length-1)*!/
             var temp=document.document.f1.textA.value;
             document.document.f1.textA.value=temp.substring(0,temp.length-1);

         }*/
    </script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-align: center;
            background: #1f1f21;
            color: #f1f1f1;
        }
        .body{
            margin: 200px auto;
            width: 500px;
            height: 730px;
            border: tomato solid 1px;
            text-align: center;
        }
        h3{
            font-size: 30px;
            font-family: 黑体;
            color: #f1f1f1;
        }
        .textA {
            margin-top: 5px;
            background: #333333;
            width: 360px;
            height: 50px;
            font-size: 40px;
        }
        table{
            margin-top: 50px;
            margin-left: 30px;
        }
        .button{
            width: 90px;
            height: 90px;
            margin: 10px;
            transition: 10ms;
            font-size: 40px;
        }
        #plus{
            height: 180px;
        }
        #zero{
            width: 180px;
        }
        .button:hover{
            color: #333333;
            background: #f1f1f1;
            font-size: 48px;
        }
        .button:active{
            color: chartreuse;
            font-size: 48px;
        }
    </style>
</head>
<body>
<div class="body">
    <h3>计算器</h3>
    <form name="f1">
        <input type="text" class="textA" name="textA" readonly >
    </form>
    <table>
        <tr>
            <td colspan="4"></td>
        </tr>
        <tr>
            <td><input type="button" class="button" value="c" onclick="clea()"></td>
            <td><input type="button" class="button" value="%" onclick="insert('%')"></td>
            <td><input type="button" class="button" value="÷" onclick="insert('/')"></td>
            <td><input type="button" class="button" value="x" onclick="insert('*')"></td>
        </tr>
        <tr>
            <td><input type="button" class="button" value="1" onclick="insert(1)"></td>
            <td><input type="button" class="button" value="2" onclick="insert(2)"></td>
            <td><input type="button" class="button" value="3" onclick="insert(3)"></td>
            <td><input type="button" class="button" value="-" onclick="insert('-')"></td>

        </tr>
        <tr>
            <td><input type="button" class="button" value="4" onclick="insert(4)"></td>
            <td><input type="button" class="button" value="5" onclick="insert(5)"></td>
            <td><input type="button" class="button" value="6" onclick="insert(6)"></td>
            <td><input type="button" class="button" value="+" onclick="insert('+')"></td>
        </tr>
        <tr>
            <td><input type="button" class="button" value="7" onclick="insert(7)"></td>
            <td><input type="button" class="button" value="8" onclick="insert(8)"></td>
            <td><input type="button" class="button" value="9" onclick="insert(9)"></td>
            <td rowspan="2"><input type="button" id="plus" class="button" value="=" onclick="over() ,insert('')"></td>
        </tr>
        <tr>
            <td colspan="2" ><input type="button" id="zero" class="button" value="0" onclick="insert(0)"></td>
            <td><input type="button" class="button" value="." onclick="insert('.')"></td>
        </tr>
    </table>
</div>
</body>
</html>